<template lang="pug">
.sidebar
  img.sidebar-logo(:src="logo")
  .sidebar-container
    router-link.sidebar-item(
      v-for="item in menus"
      :key="item.url"
      :to="{ name: item.url }"
      :class="{'router-link-exact-active': $route.meta.name === item.metaName}"
    )
      i.sidebar-item-icon(:class="item.icon")
      .sidebar-item-name {{item.name}}
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'appSidebar',
  data () {
    return {
      logo: require('../static/images/logo.png'),
      menus: [
        { icon: 'icon-menu', name: '快捷菜单', url: 'index', metaName: 'index' },
        { icon: 'icon-home', name: '首页管理', url: 'indexManage', metaName: 'indexManage' },
        { icon: 'icon-user', name: '用户管理', url: 'userManage', metaName: 'userManage' },
        { icon: 'icon-brand', name: '品牌管理', url: 'brandManage', metaName: 'brandManage' },
        { icon: 'icon-material', name: '材料管理', url: 'materialManage', metaName: 'materialManage' },
        { icon: 'icon-puzzle', name: '电子拼板', url: 'puzzle', metaName: 'puzzle' },
        { icon: 'icon-people', name: '人员管理', url: 'personManage', metaName: 'personManage' },
        { icon: 'icon-applets', name: '小程序管理', url: 'appletsManage', metaName: 'appletsManage' },
        { icon: 'icon-other', name: '其它管理', url: 'otherManage', metaName: 'otherManage' },
        { icon: 'icon-room', name: '物料间管理', url: 'storeroomManage', metaName: 'storeroomManage' },
        { icon: 'icon-setting', name: '系统管理', url: 'systemManage', metaName: 'systemManage' },
      ]
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.user
    })
  }
}
</script>

<style lang="scss" scoped>
.sidebar {
  width: 122px;
  flex-shrink: 0;
  height: 100%;
  padding: 14px 8px;
  background: #3B3E5C;
}
.sidebar-logo {
  display: block;
  margin: 0 auto;
  // width: 48px;
}
.sidebar-container {
  width: 100%;
  margin-top: 36px;
}
.sidebar-item {
  margin-bottom: 20px;
  height: 32px;
  width: 100%;
  display: flex;
  align-items: center;
  color: #8B8EAB;
  font-size: 14px;
  line-height: 20px;
  border-radius: 6px;
}
.sidebar-item-icon {
  margin: 0 5px;
  font-size: 24px;
}
.router-link-exact-active{
  background-color: #454969 !important;
  color: #fff !important;
}
</style>
